<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if指令测试</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--
    功能:
        使用v-if指令控制元素是否显示.
    说明:
        1. 通过浏览器观察效果, 并对比v-show指令的输出会发现:
            - v-show是通过操作元素的display属性节点来控制元素是否显示的, 但是v-if是直接控制这个元素是否显示的.
            - 之所以有这两个指令来控制元素是否显示是因为: 直接操作dom树对性能的消耗比较大, 而v-show消耗的性能小, 所以需要频繁控制
            隐藏或者显示的元素使用v-show, 如果在数据加载其就决定影藏或者显示的就是用v-if.
    -->
    <button v-on:click="showFlagChoose">切换显示/隐藏</button>
    <p v-if="showFlag">我是一个p标签</p>
    <p v-show="showFlag">我是一个p标签</p>
    <input type="text" v-model="inValue" />
    <p v-if="inValue < 10">输入的值小于10</p>
    <p v-else-if="inValue < 100">输入的值小于100</p>
    <p v-else>输入的值大于100</p>
</div>
</body>
<script>

    let app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            showFlag: true,
            inValue: 110
        },
        methods: {
            showFlagChoose :function () {
                this.showFlag = !this.showFlag;
            }
        }
    });

</script>
</html>